<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 库 -->

</head>
<body>
<div id="main" style="width: 1300px;height:700px;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  const dataSet = [
    [
      "新品类运营经营体",
      -0.001298773523565578,
      0.11732868724403853,
      0.017194692689754702,
      "净利润",
      "销售收入增长率"
    ],
    [
      "坚果品类运营经营体",
      -0.0002585042772681286,
      0.10219537626522737,
      2.3236032210212736,
      "净利润",
      "销售收入增长率"
    ],
    [
      "果干糖巧品类运营经营体",
      -0.0003698178242733188,
      -0.06039960415166886,
      0.06134920861611069,
      "净利润",
      "销售收入增长率"
    ],
    [
      "西式糕点品类运营经营体",
      -0.000745930015114758,
      -0.10188976420835448,
      0.101647062696807,
      "净利润",
      "销售收入增长率"
    ],
    [
      "中式糕点品类运营经营体",
      -0.0008784275117347568,
      -0.1785660683319606,
      0.0447180703528115,
      "净利润",
      "销售收入增长率"
    ],
    [
      "饼膨食礼品类运营经营体",
      -0.0007218476682658012,
      -0.22346452327126193,
      0.08932896444012099,
      "净利润",
      "销售收入增长率"
    ],
    [
      "肉食品类运营经营体",
      -0.00033500513700388516,
      -0.000015889736706087942,
      0.11981893250918861,
      "净利润",
      "销售收入增长率"
    ]
  ];

  //  dataSet
  let xName = dataSet[0][4] || '净利率';
  let yName = dataSet[0][5] || '销售收入增长率';
  let labelList = [];
  let series = [];
  let xMax = 0;
  let yMax = 0;
  let sizeMax = 0;
  dataSet.forEach((item) => {
    let size = item[3]
    sizeMax = Math.abs(size) > sizeMax ? Math.abs(size) : sizeMax
  })
  console.log(sizeMax)
  let defaultMaxSize = 100;
  let compare =  defaultMaxSize / sizeMax ;
  dataSet.forEach((item) => {
    labelList.push(item[0])
    let name = item[0]
    let x = item[1] * 100
    let y = item[2] * 100
    let size = item[3]
    xMax = Math.abs(x) > xMax ? Math.abs(x) : xMax
    yMax = Math.abs(y) > yMax ? Math.abs(y) : yMax
    sizeMax = Math.abs(size) > sizeMax ? Math.abs(size) : sizeMax
    series.push({
      name: name,
      data: [[x, y]],
      type: 'scatter',
      symbolSize: function () {
        return size * compare
      },
      label: {
        show: true,
        position: 'inside',
        color: '#333',
        formatter: function () {
          return item[0];
        },
      }
    })
  })
  let x = Math.ceil(xMax * 100 * 1.1) / 100
  let y = Math.ceil(yMax * 100 * 1.1) / 100

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: ''
    },
    tooltip: {
      formatter(v) {
        let str = v.marker
        let xValue = v.value[0]
        let yValue = v.value[1]
        xValue = Math.round(xValue * 100) / 100
        yValue = Math.round(yValue * 100) / 100
        return str + v.seriesName +
          '<br>' + xName + '：' + xValue + '%' +
          '<br>' + yName + '：' + yValue + '%'
      }
    },
    legend: {
      data: labelList,
      icon: 'roundRect',
    },
    grid: {
      left: 80,
      right: 80,
    },
    xAxis: {
      min: -x,
      max: x,
      name: xName,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        show: true,
        formatter: function (value) {
          return value + '%';
        }
      }
    },
    yAxis: {
      min: -y,
      max: y,
      name: yName,
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        show: true,
        formatter: function (value) {
          return value + '%';
        }
      }
    },
    series: series
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>
</html>
